<template>
  <div class="disk">
    <h1>硬盘统计</h1>
    <!-- <div class="fifteen">
        <img src="../img/hard_blue.png"/>
        <span>-15%</span>
        <p>192.168.163.128</p>
    </div> -->
    <!-- <Census
        :censusvalue="censusvalue"
        :ipdata="ipdata"
    /> -->
    <Census :DiskCensusData="DiskCensusData" />
  </div>
</template>

<script>
import { getDiskCensus } from "../assets/api/api";
import Census from "./Census";
export default {
  name: "Disk",
  components: {
    Census,
  },
  data() {
    return {
      // censusvalue:['-20%','-2%','-10%','-15%','-38%','-65%','-99%'],
      // ipdata:['192.168.163.128']
      DiskCensusData: [],
      timer: null,
    };
  },
//   created() {
//     this.fetchData();
//     setInterval(() => {
//       this.fetchData();
//     }, 5000);
//   },
  mounted() {
      this.fetchData();
      this.timer = setInterval(()=>{
      this.fetchData()
      },this.howtimeout)
  },
  methods: {
    fetchData() {
      getDiskCensus().then((res) => {
        this.DiskCensusData = res.data.result;
      });
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
h1 {
  color: #a4d6ff;
  height: 26px;
  font-size: 26px;
  font-weight: normal;
  font-stretch: normal;
  text-align: center;
  position: absolute;
  left: 535px;
}
</style>
